<template>
	<div :class="curClassName" :style="curStyle">
		<AppUser :imagePath="imagePath" :rawContent="rawContent"></AppUser>
	</div>
</template>
<script setup lang="ts">
import { IndexUserInfoProps } from './index-user-info';
const props = defineProps(IndexUserInfoProps);

/**
 * 项名称
 *
 * @memberof AppIndexUserInfo
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof AppIndexUserInfo
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof AppIndexUserInfo
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-index-user-info': true
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * 图片路径
 *
 * @memberof AppIndexUserInfo
 */
const imagePath = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		let imagePath = '';
		if (layoutModel.sysImage) {
			imagePath = layoutModel.sysImage.imagePath;
		}
		return imagePath;
	}
});

/**
 * 直接内容
 *
 * @memberof AppIndexUserInfo
 */
const rawContent = computed(() => {
    const layoutModel = props.layoutModelDetails[itemName.value];
    if (layoutModel && layoutModel.rawContent) {
        return layoutModel.rawContent;
    }
})
</script>
